<template>
  <div style="width: 100%;">
    <t-form :data="formData" :rules="rules" ref="form" label-align="top">
      <t-form-item label="小缩略图" name="thumb">
        <upload-img module="product" :value="[{url: formData.thumb}]" @success="handleSuccess($event, 'thumb')"></upload-img>
      </t-form-item>
      <t-form-item label="大缩略图" name="thumb_big">
        <upload-img module="product" :value="[{url: formData.thumb_big}]" @success="handleSuccess($event, 'thumb_big')"></upload-img>
      </t-form-item>
      <t-form-item label="幻灯图组" name="images_data">
        <upload-img multiple module="product" :value="formData.images_data" @success="handleSuccess($event, 'images_data')"></upload-img>
      </t-form-item>
      <t-form-item label="视频" name="video">
        <upload-video module="product"></upload-video>
      </t-form-item>
    </t-form>
  </div>
</template>

<script>

import UploadImg from "@/components/upload-img/index.vue";
import UploadVideo from "@/components/upload-video/index.vue";

export default {
  name: 'ProductInventory',
  components: {UploadVideo, UploadImg},
  props: {
    value: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      editorOption: {},
      formData: {
        thumb: '', // 小缩略图
        thumb_big: '', // 大缩略图
        images_data: [], // 幻灯图组
        video: '', // 视频
      },
      rules: {
        //thumb: [{required: true, message: '请上传小缩略图', trigger: 'change'},],
        //thumb_big: [{required: true, message: '请上传大缩略图', trigger: 'change'},],
        //images_data: [{required: true, message: '请上传幻灯图组', trigger: 'change'},],
        //video: [{required: true, message: '请上传视频', trigger: 'change'},],
      },
    }
  },
  mounted() {
  },
  methods: {
    submit() {
      return  this.$refs.form.validate()
    },
    handleSuccess(files, key) {
      if (key === 'images_data') {
        this.formData.images_data = files.fileList.map(item => ({url: item.url}))
      } else {
        this.formData[key] = files.response.url
      }
    }
  }
}
</script>

<style lang="less" scoped>

</style>
